<template>
  <div class="fullPage" ref="fullPage">
    <div class="fullPageContainer" ref="fullPageContainer" @wheel="handleWheel">
      <!-- 第一屏 -->
      <div class="section section1">
        <div class="banner">
          <img src="https://picsum.photos/1920/300" alt="banner" class="banner-img">
          <div class="banner-content">
            <h1 class="site-title">童话</h1>
            <p class="site-subtitle">寻找对面的青山乡笑颜!</p>
          </div>
        </div>
      </div>

      <!-- 第二屏 -->
      <div class="section section2" ref="section2">
        <div class="content">
          <div class="user-info">
            <div class="user-card">
              <div class="avatar">
                <img src="https://picsum.photos/200" alt="POETIZE">
              </div>
              <h2 class="username">POETIZE</h2>
              <div class="stats">
                <div class="stat-item">
                  <div class="number">{{ articles.length }}</div>
                  <div class="label">文章</div>
                </div>
                <div class="stat-item">
                  <div class="number">6</div>
                  <div class="label">分类</div>
                </div>
                <div class="stat-item">
                  <div class="number">141477</div>
                  <div class="label">访问量</div>
                </div>
              </div>
              <button class="follow-btn">关注博主</button>
            </div>
            <div class="search-box">
              <input type="text" placeholder="搜索文章..." class="search-input">
            </div>
          </div>

          <div class="articles-container">
            <div class="articles-header">
              <button class="layout-toggle" @click="toggleLayout">
                <i :class="isGridLayout ? 'icon-grid' : 'icon-list'"></i>
                {{ isGridLayout ? '列表视图' : '网格视图' }}
              </button>
            </div>

            <div :class="['article-list', { 'list-layout': !isGridLayout }]">
              <template v-if="isGridLayout">
                <article-card 
                  v-for="article in articles" 
                  :key="article.id" 
                  :article="article"
                />
              </template>
              <template v-else>
                <article-card-horizontal 
                  v-for="article in articles" 
                  :key="article.id" 
                  :article="article"
                />
              </template>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref, onMounted } from 'vue';
import { getMdList } from '@/api/md'
import ArticleCard from '../components/ArticleCard.vue';
import ArticleCardHorizontal from '../components/ArticleCardHorizontal.vue';

// 文章数据
const articles = ref([]);

// 获取文章数据
const fetchArticles = async () => {
  try {
    const response = await getMdList();
    console.log('API Response:', response);
    
    if (response && response.data && Array.isArray(response.data)) {
      articles.value = response.data.map(article => ({
        id: article.id,
        title: article.title,
        cover: article.cover || `https://picsum.photos/800/400?random=${article.id}`,
        views: 0,
        likes: 0,
        comments: 0,
        date: article.create_time || '暂无日期',
        author: 'POETIZE',
        category: article.type || '默认分类',
        content: article.content
      }));
    }
    console.log('Processed Articles:', articles.value);
  } catch (error) {
    console.error('获取文章列表失败:', error);
  }
};

// 引用 DOM 元素
const fullPage = ref(null);
const fullPageContainer = ref(null);
const section2 = ref(null);

// 状态
const currentPage = ref(1);
const isScrolling = ref(false);

// 添加布局切换状态
const isGridLayout = ref(true);

// 向下切换
const next = () => {
  if (currentPage.value < 2 && !isScrolling.value) {
    currentPage.value += 1;
    move(currentPage.value);
  }
};

// 向上切换
const pre = () => {
  if (currentPage.value > 1 && !isScrolling.value) {
    currentPage.value -= 1;
    move(currentPage.value);
  }
};

// 执行滚动
const move = (index) => {
  isScrolling.value = true;
  const height = fullPage.value.clientHeight;
  const scrollHeight = -(index - 1) * height + 'px';
  fullPageContainer.value.style.transform = `translateY(${scrollHeight})`;

  setTimeout(() => {
    isScrolling.value = false;
  }, 500);
};

// 监听鼠标滚轮事件
const handleWheel = (e) => {
  if (isScrolling.value) return;

  if (currentPage.value === 2 && section2.value.scrollTop > 0) {
    return;
  }

  if (e.deltaY > 0) {
    next();
  } else if (e.deltaY < 0) {
    pre();
  }
};

// 切换布局函数
const toggleLayout = () => {
  isGridLayout.value = !isGridLayout.value;
};

onMounted(() => {
  fullPageContainer.value.style.transition = 'transform 0.5s ease';
  fetchArticles(); // 获取文章数据
});
</script>
<style scoped lang="less">
.fullPage {
  width: 100%;
  height: 100vh;
  overflow: hidden;

  .fullPageContainer {
    width: 100%;
    height: 100vh;

    .section {
      width: 100%;
      height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .section1 {
      background-color: #f0f0f0;

      .banner {
        text-align: center;

        .banner-img {
          width: 100%;
          height: 300px;
          object-fit: cover;
        }

        .banner-content {
          margin-top: 20px;

          .site-title {
            font-size: 3rem;
            color: #333;
          }

          .site-subtitle {
            font-size: 1.5rem;
            color: #666;
          }
        }
      }
    }

    .section2 {
      background-color: #f5f5f5;
      overflow-y: auto;
      padding-top: 100px;

      .content {
        max-width: 1200px;
        margin: 0 auto;
        display: grid;
        grid-template-columns: 300px 1fr;
        gap: 2rem;
        padding-top: 1500px;

        .user-info {
          .user-card {
            background: #fff;
            border-radius: 8px;
            padding: 2rem;
            text-align: center;
            box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);

            .avatar {
              width: 120px;
              height: 120px;
              margin: 0 auto 1rem;

              img {
                width: 100%;
                height: 100%;
                border-radius: 50%;
                object-fit: cover;
              }
            }

            .username {
              color: #333;
              margin-bottom: 1rem;
            }

            .stats {
              display: flex;
              justify-content: space-around;
              margin-bottom: 1.5rem;

              .stat-item {
                .number {
                  font-size: 1.2rem;
                  font-weight: bold;
                  color: #42b983;
                }

                .label {
                  font-size: 0.9rem;
                  color: #999;
                }
              }
            }

            .follow-btn {
              width: 100%;
              padding: 0.8rem;
              border: none;
              border-radius: 4px;
              background: #42b983;
              color: white;
              cursor: pointer;
              transition: all 0.3s;

              &:hover {
                background: #3aa876;
              }
            }
          }

          .search-box {
            margin-top: 1rem;

            .search-input {
              width: 100%;
              padding: 0.8rem;
              border: 1px solid #ddd;
              border-radius: 4px;
              outline: none;

              &:focus {
                border-color: #42b983;
              }
            }
          }
        }

        .articles-container {
          .articles-header {
            display: flex;
            justify-content: flex-end;
            margin-bottom: 1rem;

            .layout-toggle {
              display: flex;
              align-items: center;
              gap: 0.5rem;
              padding: 0.5rem 1rem;
              border: none;
              border-radius: 4px;
              background: #fff;
              color: #666;
              cursor: pointer;
              transition: all 0.3s;
              box-shadow: 0 2px 8px rgba(0,0,0,0.1);

              &:hover {
                background: #f5f5f5;
              }

              i {
                font-size: 1.2rem;
              }
            }
          }

          .article-list {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 2rem;

            &.list-layout {
              grid-template-columns: 1fr;
            }
          }
        }
      }
    }
  }
}
</style>